<!doctype html>
<!--
Copyright 2019 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #mainanim {
      width: 200px;
      height: 200px;
      background-color: red;
      animation: expand 2s infinite
    }
    @keyframes expand {
      0% { width: 200px; }
      100% { width: 500px; }
    }
  </style>
</head>
<body>
<div id='mainanim'></div>

</body>
<script>
var startTime = new Date();
var frameNum = 0;
function jank() {
  frameNum = frameNum + 1;
  // Make the jank long enough such that there is one main frame presented for
  // every two main frames.
  while ((new Date() - startTime) < 2 * 16.67 * frameNum + 20) {}
  requestAnimationFrame(jank);
}
requestAnimationFrame(jank);
</script>
</html>
